<template>
  <div class="page pb-100">
    <!-- 顶部栏 -->
    <van-nav-bar :border="false">
      <template #left>
        <div class="fz-16 fw-bold">{{ $t('商品详情') }}</div>
      </template>
    </van-nav-bar>

    <div class="container rel">
      <div class="ta-center click">
        <div class="flex flex-center mb-10">
          <img style="width: 200px; height: 150px" />
        </div>
        <div class="fz-16 fw-bold lh-2">
          <div>洗面奶</div>
          <div class="cl-success">100 U</div>
        </div>
      </div>

      <div class="lh-2">
        <div class="fz-16 fw-bold">商品介绍</div>
        <div class="mb-10">
          商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
          商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
        </div>
        <div class="flex flex-center mb-10">
          <img style="width: 200px; height: 150px" />
        </div>
      </div>
    </div>

    <div class="footer flex flex-center p-20">
      <div class="btn btn--large active" @click="payVisible = true">支付</div>
    </div>

    <!-- 确认订单 -->
    <van-popup v-model:show="payVisible">
      <div class="popup">
        <div class="flex flex-cc mb-10">
          <img style="width: 120px; height: 80px" class="mr-15" />

          <div class="flex-1">
            <div>洗面奶</div>
            <div>
              <span class="cl-success">{{ $t('价值') }}：</span>
              <span>100 U</span>
            </div>
            <div>
              <span>{{ $t('类型') }}：</span>
              <span>购物</span>
            </div>
          </div>
        </div>

        <!-- 订单备注 -->
        <div class="mb-15">
          <div class="mb-10">{{ $t('购买数量') }}</div>
          <van-field :placeholder="$t('请输入购买数量')"></van-field>
        </div>

        <div class="flex flex-rb">
          <div class="btn btn--large click active">{{ $t('USDT支付') }}</div>
          <div class="btn btn--large click active">{{ $t('代币支付') }}</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const payVisible = ref(true)
</script>

<style lang="scss" scoped>
.page {
  position: relative;
  background: url('/bg.png') no-repeat center / cover;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba($color: #2f55ff, $alpha: 0.3);
  }
}
</style>
